<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { scmGoodsData } from '#/views/backend/scmGoods/config';

import { defineEmits, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, Input, Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import {getGoodsList} from "#/api/goodsPurchase";


// 定义要发送的事件 会返回成品档案列表
const  ischeck =ref(false);
type EmitEvents = {
  pushData: [data: scmGoodsData[]];
};
const emit = defineEmits<EmitEvents>();

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/6',
  footer:false,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {},
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return
    const { data  } = modalApi.getData<Record<string, any>>()
    console.log(data);
    
    ischeck.value = !data;
  }
});

const gridOptions: VxeTableGridOptions<scmGoodsData> = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },

  columns: [
    {type: 'checkbox', width: 70, align: 'center', fixed: 'left', title: '选择',},
    { field: 'goods_no', title: '货号', width: 80 },
    { field: 'color.name', title: '颜色', width: 60 },
    { field: 'template.template_no', title: '简码', width: 120, },
    { field: 'goods_name', title: '品名', width: 140 },
    { field: 'cate_name', title: '分类', width: 180,},
    { field: 'purchase_price', title: '采购价', width: 60,},
    { field: 'time_cate_name', title: '时间分类', width: 120,},
    { field: 'style_cate_name', title: '风格', width: 170,},
    { field: 'created_at', title: '创建时间', width: 140,},
    { field: 'action', title: '操作', width: 100, slots: { default: 'action' },},
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        // 2. 调接口
        const res = await getGoodsList({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
        });

        return { items: res.list, total: res.total };
      },
    },
    sort: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

/**
 *  快速查询查询
 */
const quick_search = ref();
function doSearch() {
  gridApi.query();
}

/**
 * 处理推送按钮点击事件
 */
function handlePush(row: scmGoodsData) {
  // 发送数据到父组件，确保总是数组格式
  emit('pushData', [row]);
  // 关闭模态框
  modalApi.close();
}

/**
 * 处理工具栏选择按钮点击事件
 */
function handleToolbarSelect() {
  // 获取选中的所有行数据
  const selectedRecords = gridApi.grid.getCheckboxRecords();

  if (selectedRecords && selectedRecords.length > 0) {
    // 发送选中的数据到父组件
    emit('pushData', selectedRecords);
    // 关闭模态框
    modalApi.close();
  }
}



</script>

<template>
  <Modal title="">
      <Grid>
        <template #toolbar-actions>
          <Button type="primary" v-if="ischeck" @click="handleToolbarSelect">选择</Button>
        </template>
        <template #toolbar-tools>
          <Input v-model:value="quick_search" allow-clear placeholder="输入货号或品名" style="width: 200px; margin-right: 8px" @change="doSearch" />
        </template>
        <!-- 操作列插槽 -->
        <template #action="{ row }">
          <Space>
            <Button type="primary"class="my-green-btn" size="small" @click="handlePush(row)">选择</Button>
          </Space>
        </template>
      </Grid>
  </Modal>
</template>
<style lang="scss" scoped></style>
